<template>
	<view class="warp">
		<view class="index_warp">
			<view class="logo">
				<image src="~@/static/jitai/logo.png">
			</view>
			<view class="user_top_info">
				<view class="user_left">
					<image src="~@/static/jitai/pic/1200.jpg">
					<view class="name_level">
						<view class="name">云中的枫野</view>
						<view class="level">
							<view class="l_icon level_3"></view>
							市级代理
						</view>
					</view>
				</view>
				<view class="user_right">
					<navigator url="/pages/user/setup" hover-class="none"><u-icon name="shezhi" custom-prefix="coolc" color="#fff" size="50"></u-icon></navigator>
					<navigator url="/pages/user/share_code" hover-class="none"><u-icon name="erweima" custom-prefix="coolc" color="#fff" size="50"></u-icon></navigator>
				</view>
			</view>
			<view class="numBox_item">
				<navigator url="#" class="item" hover-class="none">
					<view class="num">
						<view class="b">360.86</view>
						<text>万</text>
					</view>
					<view class="span">预存货值</view>
				</navigator>
				<navigator url="/pages/user/order" class="item" hover-class="none">
					<view class="num">
						<view class="b">19</view>
					</view>
					<view class="span">我的订单</view>
				</navigator>
				<navigator url="#" class="item" hover-class="none">
					<view class="num">
						<view class="b">18910</view>
					</view>
					<view class="span">累计收益</view>
				</navigator>
				<navigator url="/pages/user/friend" class="item" hover-class="none">
					<view class="num">
						<view class="b">86</view>
					</view>
					<view class="span">我的推荐</view>
				</navigator>
			</view>
			<view class="wallet_box">
				<navigator url="/pages/user/accounts" hover-class="none" class="w_left">
					<view class="jr">1986300.36</view>
					<view class="span">
						<u-icon name="tishishuoming" custom-prefix="coolc" color="#999" top="2" size="29"></u-icon> 推广奖励
					</view>
				</navigator>
				<view class="w_right">
					<view class="btn_box">
						<navigator url="/pages/user/withdraw" class="withdraw" hover-class="none">提现</navigator>
						<navigator url="/pages/user/transfer" class="transfer" hover-class="none">转帐</navigator>
					</view>
					<navigator url="/pages/user/accounts" hover-class="none" class="log">帐户明细</navigator>
				</view>
			</view>
		</view>
		<view class="service_box">
			<view class="all_title_box">
				<view class="title_left">
					<view class="svg"><u-icon name="shangpin" custom-prefix="coolc" color="#fd623d" size="42"></u-icon></view>
					<view class="text">待确认服务</view>
				</view>
			</view>
			<view class="service_list_box">
				<navigator class="item i_1" url="#" hover-class="none">
					<u-icon name="xiugaidingdan" custom-prefix="coolc" color="#ff8d27" size="60"></u-icon>
					<view class="texts">
						<view class="name">直推订单</view>
						<view class="span">直推用户的订单</view>
					</view>
				</navigator>
				<navigator class="item i_2" url="#" hover-class="none">
					<u-icon name="hetongdingdan" custom-prefix="coolc" color="#00a8ff" size="60"></u-icon>
					<view class="texts">
						<view class="name">升级订单</view>
						<view class="span">区域用户的订单</view>
					</view>
				</navigator>
			</view>
			
			<view class="user_icon_box">
				<view class="all_title_box">
					<view class="title_left">
						<view class="svg"><u-icon name="gongju" custom-prefix="coolc" color="#fd623d" size="38"></u-icon></view>
						<view class="text">工具信息</view>
					</view>
				</view>
				<view class="icon_item_box">
					<navigator class="item" url="/pages/user/order" hover-class="none">
						<view class="svg_icon"><image src="~@/static/jitai/svg/my_order.svg"></view>
						<view class="p">我的订单</view>
					</navigator>
					<navigator class="item" url="/pages/user/service" hover-class="none">
						<view class="svg_icon"><image src="~@/static/jitai/svg/my_service.svg"></view>
						<view class="p">服务关系</view>
					</navigator>
					<navigator class="item" url="/pages/user/friend" hover-class="none">
						<view class="svg_icon"><image src="~@/static/jitai/svg/my_friend.svg"></view>
						<view class="p">我的好友</view>
					</navigator>
					<navigator class="item" url="/pages/user/share_code" hover-class="none">
						<view class="svg_icon"><image src="~@/static/jitai/svg/my_code.svg"></view>
						<view class="p">我的二维码</view>
					</navigator>
					<navigator class="item" url="/pages/user/withdraw" hover-class="none">
						<view class="svg_icon"><image src="~@/static/jitai/svg/my_withdraw.svg"></view>
						<view class="p">奖励提现</view>
					</navigator>
					<navigator class="item" url="/pages/user/transfer" hover-class="none">
						<view class="svg_icon"><image src="~@/static/jitai/svg/my_transfer.svg"></view>
						<view class="p">奖励转出</view>
					</navigator>
					<navigator class="item" url="/pages/user/bank_card" hover-class="none">
						<view class="svg_icon"><image src="~@/static/jitai/svg/my_tixian.svg"></view>
						<view class="p">提现帐号</view>
					</navigator>
				</view>
			</view>
			
			<view class="user_icon_box">
				<view class="all_title_box">
					<view class="title_left">
						<view class="svg"><u-icon name="fuwu1" custom-prefix="coolc" color="#fd623d" size="38"></u-icon></view>
						<view class="text">服务商信息</view>
					</view>
				</view>
				<view class="icon_item_box">
					<navigator class="item" url="/pages/user/share_award" hover-class="none">
						<view class="svg_icon"><image src="~@/static/jitai/svg/my_share.svg"></view>
						<view class="p">分享奖励</view>
					</navigator>
					<navigator class="item" url="/pages/user/regioc_award" hover-class="none">
						<view class="svg_icon"><image src="~@/static/jitai/svg/my_region.svg"></view>
						<view class="p">区域奖</view>
					</navigator>
					<navigator class="item" url="/pages/user/my_region" hover-class="none">
						<view class="svg_icon"><image src="~@/static/jitai/svg/my_prize.svg"></view>
						<view class="p">我的区域</view>
					</navigator>
					<navigator class="item" url="/pages/user/my_service" hover-class="none">
						<view class="svg_icon"><image src="~@/static/jitai/svg/my_clothes.svg"></view>
						<view class="p">我服务的</view>
					</navigator>
					<navigator class="item" url="/pages/user/advance_payment" hover-class="none">
						<view class="svg_icon"><image src="~@/static/jitai/svg/my_recharge.svg"></view>
						<view class="p">预存货值</view>
					</navigator>
					<navigator class="item" url="/pages/user/advance_transfer" hover-class="none">
						<view class="svg_icon"><image src="~@/static/jitai/svg/my_value.svg"></view>
						<view class="p">货值转出</view>
					</navigator>
				</view>
			</view>
			
			<view class="user_icon_box">
				<view class="all_title_box">
					<view class="title_left">
						<view class="svg"><u-icon name="huaban" custom-prefix="coolc" color="#fd623d" size="38"></u-icon></view>
						<view class="text">基础信息</view>
					</view>
				</view>
				<view class="icon_item_box">
					<navigator class="item" url="/pages/user/info" hover-class="none">
						<view class="svg_icon"><image src="~@/static/jitai/svg/my_info.svg"></view>
						<view class="p">个人资料</view>
					</navigator>
					<navigator class="item" url="/pages/user/password" hover-class="none">
						<view class="svg_icon"><image src="~@/static/jitai/svg/my_mima.svg"></view>
						<view class="p">登录密码</view>
					</navigator>
					<navigator class="item" url="/pages/user/safe_password" hover-class="none">
						<view class="svg_icon"><image src="~@/static/jitai/svg/my_safe.svg"></view>
						<view class="p">安全密码</view>
					</navigator>
					<navigator class="item" url="/pages/user/address" hover-class="none">
						<view class="svg_icon"><image src="~@/static/jitai/svg/my_address.svg"></view>
						<view class="p">收货地址</view>
					</navigator>
				</view>
				<navigator class="logout" hover-class="none">退出登录</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.index_warp {
		width: 100%;
		height: 540rpx;
	
		.logo {
			width: 180rpx;
			padding: 38rpx 38rpx 31rpx 38rpx;
			
			image {
				width: 187rpx;
				height: 60rpx;
			}
		}
	}
	.user_top_info {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 28rpx;
		
		.user_left {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			
			image {
				width: 100rpx;
				height: 100rpx;
				border: 4rpx solid #fff;
				border-radius: 100rpx;
			}
			.name_level {
				padding-left: 16rpx;
				
				.name {
					font-size: 32rpx;
					color: #fff;
					padding-bottom: 8rpx;
				}
			}
		}
		.user_right {
			display: flex;
			
			.u-icon {
				margin-left: 24rpx;
			}
		}
	}
	.numBox_item {
		width: 100%;
		padding: 28rpx;
		display: flex;
		justify-content: space-between;
		
		.item {
			text-align: center;
			
			.num {
				height: 50rpx;
				padding-bottom: 4rpx;
				display: flex;
				justify-content: center;
				overflow: hidden;
				
				.b {
					font-size: 38rpx;
					color: #fff;
					font-weight: bold;
				}
				text {
					padding: 12rpx 0 0 6rpx;
					font-size: 24rpx;
					color: rgba(255,255,255,0.6);
				}
			}
			.span {
				font-size: 24rpx;
				color: rgba(255,255,255,0.6);
			}
		}
	}
	.wallet_box {
		width: 694rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 0 8rpx #999;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		
		.w_left {
			align-items: center;
			
			.jr {
				height: 58rpx;
				line-height: 58rpx;
				font-size: 46rpx;
				display: block;
				color: #000;
				font-weight: bold;
				margin-bottom: 8rpx;
			}
			.span {
				font-size: 26rpx;
				color: #999;
				
				.u-icon {
					margin-right: 8rpx;
				}
			}
		}
		.w_right {
			
			.btn_box {
				display: flex;
				justify-content: space-between;
				padding-bottom: 14rpx;
				
				.withdraw {
					border: 2rpx solid #35c877;
					color: #fff;
					background: #35c877;
					font-size: 28rpx;
					padding: 8rpx 28rpx;
					border-radius: 40rpx;
				}
				.transfer {
					border: 2rpx solid #fe4c22;
					color: #fe4c22;
					font-size: 28rpx;
					padding: 8rpx 28rpx;
					border-radius: 40rpx;
					margin-left: 12rpx;
				}
			}
			.log {
				width: 100%;
				text-align: right;
				font-size: 24rpx;
				padding-left: 4rpx;
				color: #999;
			}
		}
	}
	.service_box {
		width: 100%;
		padding: 86rpx 28rpx 28rpx 28rpx;
		background: #f3f3f3;
		
		.all_title_box {
			.text {
				color: #666;
				font-weight: 500;
			}
		}
	}
	
	.service_list_box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		
		.item {
			width: 48%;
			padding: 20rpx;
			background: #fff;
			border-radius: 10rpx;
			margin-top: 24rpx;
			display: flex;
			box-sizing: border-box;
			
			&:nth-child(1),&:nth-child(2){
				margin-top: 12rpx;
			}
			&.i_1 {
				color: #ff6a27;
			}
			&.i_2 {
				color: #0094e0;
			}
			&.i_3 {
				color: #35c877;
			}
			&.i_4 {
				color: #e671a8;
			}
			
			.u-icon {
				margin-right: 10rpx;
			}
			.texts {
				.name {
					font-size: 30rpx;
					padding-bottom: 4rpx;
					font-weight: bold;
				}
				.span {
					font-size: 24rpx;
					opacity: 0.6;
				}
			}
		}
	}
	
	.user_icon_box {
		margin-top: 28rpx;
		background: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
	}
	.icon_item_box {
		width: 100%;
		height: auto;
		display: table;
		padding: 10rpx 0 0 0;
		
		.item {
			width: 25%;
			text-align: center;
			float: left;
			padding: 16rpx 0;
			
			.svg_icon {
				width: 66rpx;
				height: 66rpx;
				margin: 0 auto;
				
				image {
					width: 66rpx;
					height: 66rpx;
				}
			}
			.p {
				width: 100%;
				font-size: 26rpx;
				text-align: center;
				padding-top: 6rpx;
				color: #999;
			}
		}
	}
	.logout {
		width: 90%;
		padding: 20rpx 0;
		font-size: 32rpx;
		text-align: center;
		border: 2rpx solid #18B566;
		color: #18B566;
		border-radius: 60rpx;
		margin: 24rpx auto 16rpx auto;
	}
</style>
